<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port v-model="condition['search_EQ_portCode']" :name="condition['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业日期起">
                        <el-date-picker v-model="condition['search_GTE_jobTime']" type="datetime" placeholder="起始日期"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业日期止">
                        <el-date-picker v-model="condition['search_LTE_jobTime']" type="datetime" placeholder="结束日期"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业班组">
                        <el-input v-model="condition['search_LIKE_className']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" class="ml-120" @click="loadData">查 询</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column label="序号" fixed="left" min-width="55">
                <template fixed="left" slot-scope="scope">
                    <div>{{ scope.row.index }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="portName" label="作业港口"  min-width="120"></el-table-column>
            <el-table-column prop="tallyTime" label="作业日期"  min-width="120">
                <template slot-scope="scope">
                    {{ scope.row.tallyTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column prop="groupName" label="作业班组"  min-width="120"></el-table-column>
            <el-table-column prop="pieceUserName" label="作业人"  min-width="120"></el-table-column>
            <el-table-column prop="planType" label="作业类型"  min-width="120">
                <template slot-scope="scope">
                    {{ scope.row.planType | _filterAllJobStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="shift" label="船名/航次"  min-width="120">
                <template slot-scope="scope">
                    {{ scope.row.shipName }}
                    <span v-if="scope.row.shipName&&scope.row.voyage">/</span>
                    {{ scope.row.voyage }}
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="piece" label="工时"  min-width="100"></el-table-column>
            <el-table-column prop="tallyTime" label="作业时间"  min-width="160"></el-table-column>
        </el-table>
        <el-row class="bottom mt-10" type="flex" justify="space-between" v-show="total>0">
            <div class="oper">

            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import { getPersonCountList } from "@/api/balance/balance";
    import selectPort from '@/components/select/selectPort'
    import { newExportExcel } from "@/utils/newExport";
    import { allJobStatus, tradeType } from "../../../assets/dict";

    export default {
        name: "作业人员统计",
        components: { selectPort },
        data() {
            return {
                total: 0,
                pageInfo: this.$defalutPage(),
                listLoading: false,
                condition: {
                    search_EQ_portCode: '',
                    search_GTE_jobTime: '',
                    search_LTE_jobTime: '',
                    search_LIKE_className: '',
                },
                list: []
            }
        },
        mounted() {
            const params = JSON.parse(sessionStorage.getItem('classPerson'))
            console.log(params)
            this.condition = { ...params }
            this.$set(this.condition, 'search_GTE_jobTime', this.condition['search_GTE_jobTime']+' 00:00:00')
            this.$set(this.condition, 'search_LTE_jobTime', this.condition['search_LTE_jobTime']+' 23:59:59')
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = this.pageInfo.iDisplayLength
                this.listLoading = true
                getPersonCountList(params).then(res => {
                    this.created = false
                    const data = res.data
                    this.total = data.iTotalRecords || 0
                    this.listLoading = false
                    let list = data.aaData
                    this.list.splice(0, this.list.length)
                    for (let i = 0; i < list.length; i++) {
                        const el = list[i]
                        // if()
                        this.list.push({
                            ...el,
                            index: i + 1
                        })
                    }
                })
            },
            handleExport() {
                let map = new Map();
                map.set('portName', '作业港口')
                map.set('tallyTime', '作业日期')
                map.set('groupName', '作业班组')
                map.set('groupName', '作业人')
                map.set('planType', '作业类型')
                map.set('shipName', '船名')
                map.set('voyage', '航次')
                map.set('containerId', '箱号')
                map.set('containerSize', '尺寸')
                map.set('containerType', '箱型')
                map.set('tradeType', '内外贸')
                map.set('piece', '工时')
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = 9999
                getPersonCountList(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "planType") {
                                record[key] = allJobStatus.get(record[key]);
                            }
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("作业人员统计", exportRecords);
                })
            },
            handleChangeEnd(val) {
                let setVal = val;
                if (val) {
                    setVal = val.split(" ")[0] + " 23:59:59";
                }
                this.condition["search_LTE_jobTime"] = setVal;
            },
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>

</style>
